<template>
  <div>
    <zh-form
        :span="8"
        ref="rolePageFrom"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="formData"
        :rules="rules">

      <zh-card title="总体态势信息" style="width:100%">
        <zh-row>
          <zh-input
              prop="zb1"
              :disabled="disabled"
              type="select"
              label="指标1"
              :options="zb1List"
              :defaultFields="{ label: 'value', value: 'key' }"
              v-model="formData.zb1"
              @change="handleZb2Method"
          ></zh-input>
          <zh-input
              v-if="formData.zb1!=='不可移动文物统计'"
              prop="zb2"
              :disabled="disabled"
              type="select"
              label="指标2"
              :options="zb2List"
              :defaultFields="{ label: 'value', value: 'key' }"
              v-model="formData.zb2"
          ></zh-input>
          <zh-input
              v-if="formData.zb1==='不可移动文物统计'"
              prop="zb2"
              :disabled="disabled"
              type="text"
              label="指标2"
              v-model="formData.zb2"
          ></zh-input>
          <zh-input
              prop="orgId"
              :disabled="disabled"
              type="select"
              :options="sqData"
              :defaultFields="{ label: 'orgName', value: 'orgId' }"
              label="县市区"
              v-model="formData.orgId"
          ></zh-input>
          <zh-input
              prop="num"
              :disabled="disabled"
              type="number"
              label="总数"
              v-model="formData.num"
          ></zh-input>

        </zh-row>
      </zh-card>
    </zh-form>
  </div>
</template>

<script>
import {
  getSQAndWz, getZztsZyqlXgDetails, saveZztsZyqlXg
} from "@/services/system/whdngxlApi";
import modal from "ant-design-vue/lib/modal";

export default {
  name: "ZztsZyqlXgForm",
  components: {
  },
  props:{
    listQuery:{
      type:Function,
      default:null
    }
  },
  data() {
    return {
      dictData: {},
      disabled: false,
      formData: {
        zb1:'',
        zb2:'',
        orgId:'',
        orgName:'',
        num:'',
      },
      sqData:[],
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      rules: {},
      visible:false,
      zb1List:[
          {key:'总体态势-资源全览',value:'总体态势-资源全览'},
          {key:'总体态势-保护工程',value:'总体态势-保护工程'},
          {key:'总体态势-保护经费',value:'总体态势-保护经费'},
          {key:'不可移动文物统计',value:'不可移动文物统计'},
      ],
      zb2List:[],
      zyqlList:[
        {key:'总类目',value:'总类目'},
        {key:'总数量',value:'总数量'},
        {key:'总监测数',value:'总监测数'},
        {key:'组织队伍',value:'组织队伍'},
        {key:'文保员',value:'文保员'},
        {key:'专业机构',value:'专业机构'},
      ],
      bhgcList:[
          {key:'工程总数',value:'工程总数'},
          {key:'展示工程',value:'展示工程'},
          {key:'修缮工程',value:'修缮工程'},
          {key:'迁建工程',value:'迁建工程'},
          {key:'其他工程',value:'其他工程'},
      ],
      bhjfList:[
          {key:'经费总额',value:'经费总额'},
          {key:'申请经费额',value:'申请经费额'},
          {key:'落地经费额',value:'落地经费额'},
          {key:'已使用经费额',value:'已使用经费额'},
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    handleZb2Method(data){
      this.zb2List=[]
      if ( data==='总体态势-资源全览'){
        this.zb2List=this.zyqlList
      }else if ( data==='总体态势-保护工程'){
        this.zb2List=this.bhgcList
      }else if ( data==='总体态势-保护经费'){
        this.zb2List=this.bhjfList
      } else {
        this.zb2List=[]
      }
    },
    init(){
      this.$http.post(getSQAndWz, {}).then((res) => {
        this.sqData = res.result.sqData;
      });
    },
    initData(row, type){
      this.disabled = type === 'view'
      if(row.id){
        this.$http.post(getZztsZyqlXgDetails, {id:row.id}).then((res) => {
          this.formData = res.result;
        });
      }
    },
    saveData() {
      this.$loading.show('正在处理数据,请等待...')
      if (this.formData.orgId){
        this.formData.orgName = this.sqData.find(item => item.orgId === this.formData.orgId).orgName
      }
      const params = Object.assign(this.formData)
      setTimeout(() => {
        this.$http.post(saveZztsZyqlXg, params).then((res) => {
          this.$message.info('保存成功')
          this.$emit("handleCancel")
          if(this.listQuery){
            this.listQuery()
          }
          this.$loading.hide()
        }).catch((error) => {
          console.log(JSON.stringify(error))
          this.$loading.hide()
        }).finally(() =>{
        })
      }, 50)
    },
  },
}
</script>

<style scoped>

</style>